<template>
  <div class="detail-data" style="height: 100%">
    <div class="top">
      <el-page-header content="详情页面" @back="goBack" />
    </div>
    <div v-loading="isRequesting" class="bottom">
      <VirtualTable childrenAlisas="children" :rowStyle="rowStyle" rowKey="id" :table="tableData">
        <!-- 层级 -->
        <Cell align="left" fix="left" label="层级" prop="level" />
        <!-- 行号 -->
        <Cell label="行号" prop="rowNumber" />
        <!-- SAP料号 -->
        <Cell label="SAP料号" prop="partNumber" />
        <!-- SAP物料组 -->
        <Cell label="SAP物料组" prop="materialGroup" />
        <!-- SAP料件类型 -->
        <Cell label="SAP料件类型" prop="materialType" />
        <!-- SAP物料说明 -->
        <Cell label="SAP物料说明" prop="partDescription" :width="400" />
        <!-- 替代料组 -->
        <Cell label="替代料组" prop="alternativeItemGroup" />
        <!-- 计算标识 -->
        <Cell label="计算标识" prop="calculateStatus" />
        <!-- CBOM版本 -->
        <Cell label="CBOM版本" prop="cbomVersion" />
        <!-- 总金额 -->
        <Cell label="总金额" prop="cost" />
        <!-- 料件单价 -->
        <Cell label="料件单价" prop="pirPrice" />
        <!-- 采购类型 -->
        <Cell label="采购类型" prop="procurementMethod" />
        <!-- 料件用量 -->
        <Cell label="料件用量" prop="ratio" />
        <!-- SAP采购员代码 -->
        <Cell label="SAP采购员代码" prop="sourcerCode" />
        <!-- 类别 -->
        <Cell label="类别" prop="tower" />
        <!-- Tracking SKU -->
        <Cell label="Tracking SKU" prop="trackingSku" />
        <!-- 替代料使用比例 -->
        <Cell label="替代料使用比例" prop="usageProbability" />
      </VirtualTable>
    </div>
  </div>
</template>
<script>
import Cell from '@/widgets/VirtualTable/Cell'
import VirtualTable from '@/widgets/VirtualTable/Table'
import { cbomInfoDetailList } from '@/api/cbom/info'
export default {
  name: 'CbomDetailData',

  components: { VirtualTable, Cell },

  props: {
    // 行数据
    rowData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 正在查询
      isRequesting: false,
      // 表格数据
      tableData: [],
      // 颜色分层
      colorData: {
        1: '#B0E0E6',
        2: '#E0FFFF',
        3: '#90EE90',
        4: '#FFDEAD',
        5: '#FFFAF0',
        6: '#F5F5F5'
      }
    }
  },
  created() {
    this.getDetailData()
  },
  methods: {
    // 拉取详情数据
    async getDetailData() {
      try {
        this.isRequesting = true
        const res = await cbomInfoDetailList({
          trackingSku: this.rowData.trackingSku,
          cbomVersion: this.rowData.cbomVersion
        })
        this.tableData = res.data
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    // 返回
    goBack() {
      this.$emit('cancel')
    },

    rowStyle(index, row) {
      return {
        backgroundColor: this.colorData[row.level]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.detail-data {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  overflow: hidden;
}
.top {
  padding-top: 10px;
  height: 50px;
}

.bottom {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 5px;
}
</style>
